Ajaxするにあたって必要な知識 ＆ axiosについて

Webサービスを作るといっても、何がどういうふうに動いているかを把握する必要があります。

以下は、TODOリストを例に、Webアプリがどういう感じに動くのかを雑に説明します。

https://gyazo.com/1eb2bcb0428750851ca3cf37262b734c

１．まず空のTODOリストがブラウザに表示されます。

２．ブラウザからAPIサーバに「GETリクエスト」を送信し、TODO一覧をJSON形式で受け取ります

３．受け取ったJSONをVue.jsのdataに突っ込むと、TODOリストがレンダリングされます。

さて、下記の疑問が出てくると思います。

「APIサーバ」って何者なのか？

JSONって何？

GETリクエストって何？

どうやってやり取りすればいいの？（Vue.jsにその機能は組み込まれていない）

APIサーバとは

こういうやつです。

https://gyazo.com/7bed24682237c09e33a75a5231d1154b

詳しくは下記記事などを参考にしてください。

APIサーバは自前で書くこともできます（というか、仕事上はたいてい書きます）。

GETを受け付けてTODOを３つJSONで返すサーバは、Node.jsとExpressだと下記のような感じで書けます。

code: server.js

var express = require('express');

var app = express();

app.get('/', function (req, res) {

});

app.listen(3000, function () {

console.log('ポート3000でAPIサーバを起動しました');

});

現状、res.jsonは固定値を返していますが、実用的なアプリだとここでデータベースにアクセスして、TODO一覧をテーブルから取得することになるでしょう。

JSONって何

下記のページを参照

どうやってやり取りすればいいの？

残念ながら、HTTPリクエストの送信は、Vue.jsの機能には組み込まれていません。

外部ライブラリを使うか、fetchという新しい仕様を使うことになりますが、現時点ではaxiosをおすすめします。

利用方法については下記サイトを参考にしてください。

注意点として、axiosはIE11では動作しない(Promiseという仕様がIE11に入っていないため)ので、下記のライブラリをaxios利用前に入れておく必要があります。